<template>
    <div>
        <!-- <el-button type="primary">
            添加
            <CirclePlus />
        </el-button> -->
        <div class="titleOne">
            内容列表
            <!-- <el-button class="add-bt" type="primary" size="small" @click="addOnlick">
                添加
                <el-icon class="el-icon--right"><CirclePlus /></el-icon>
            </el-button> -->
            <el-button class="add-bt" type="primary" size="small" @click="captureAndDownload">
                下载导出图片
                <el-icon class="el-icon--right"><Download /></el-icon>
            </el-button>
        </div>
        <div class="list-view-all">
            <div class="list-div">
                <draggable v-model="listData" item-key="idKesy" @end="onDragEnd">
                    <template #item="{element}">
                        <div class="itemType">
                            <div class="left-div" @click="updateForm(element)">
                                <div>
                                    <!-- 剧中时间 -->
                                    <span v-if="element.msgType == 'timeText'">
                                        {{ element.centerTime }}
                                    </span>
                                    <!-- 提示文本 -->
                                    <span v-if="element.msgType == 'rightTips'">
                                        {{ element.rightText }}
                                    </span>
                                    <!-- 用户信息 -->
                                    <span class="adminInfo" v-if="element.msgType == 'adminInfo'">
                                        <el-avatar :size="100" :src="element.avatarUrl" />
                                        <div class="right-info">
                                            <span class="userName">{{ element.userName }}</span>
                                            <span class="idStr">{{ element.idStr }}</span>
                                            <span class="admin">{{ element.admin }}个关注账号·{{ element.fsNumber }}个粉丝</span>
                                        </div>
                                        <!-- <div class="fsNumber"></div> -->
                                    </span>

                                    <!-- 发送消息内容 -->
                                    <span v-if="element.msgType == 'sendText'">
                                        <!-- {{ item.leftAndRight }} -->
                                        {{ element.textValue }}
                                    </span>

                                    <!-- 发送图片 -->
                                    <span v-if="element.msgType == 'imageType'">
                                        {{ getBqValueName(element.image) }}
                                        <!-- <div class="left" v-if="item.leftAndRight == 'left'">
                                <div class="left-biaoqing">
                                    <el-avatar :size="100" :src="fromData.avatarUrl" />
                                    <img class="biaoqiang" :src="bqUrl" />
                                </div>
                                <img class="huifu" :src="huifuUrl" />
                            </div>
                            <div class="right" v-if="item.leftAndRight == 'right'">
                                <img class="biaoqiang" :src="bqUrl" />
                            </div> -->
                                    </span>
                                </div>
                            </div>

                            <span class="right-div">
                                <el-button class="add-bt" type="danger" size="small" @click="deleteOnclick(element)">
                                    删除
                                    <el-icon class="el-icon--right"><Delete /></el-icon>
                                </el-button>
                            </span>
                        </div>
                    </template>
                </draggable>
            </div>
        </div>
        <div class="titleOne addtitle">选择信息类型</div>
        <div class="add-div">
            <div class="addForm">
                <el-form :model="currentAddForm" :rules="rules" label-width="100" ref="ruleAddFormRef" size="small">
                    <el-form-item label="" label-width="0" prop="msgType">
                        <el-radio-group v-model="currentAddForm.msgType">
                            <el-radio :value="item.value" v-for="item in msgTypeArray" :key="item.value">
                                {{ item.name }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="currentAddForm.msgType == 'timeText'" label="时间" prop="centerTime">
                        <el-input v-model="currentAddForm.centerTime" />
                    </el-form-item>
                    <template v-if="currentAddForm.msgType == 'rightTips'">
                        <el-form-item label="选择字体颜色">
                            <el-radio-group v-model="currentAddForm.rightTextColor">
                                <el-radio value="heise">黑色</el-radio>
                                <el-radio value="hongse">红色</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="提示文本" prop="rightText">
                            <el-input v-model="currentAddForm.rightText" />
                        </el-form-item>
                    </template>

                    <template v-if="currentAddForm.msgType == 'adminInfo'">
                        <div class="avatar-div">
                            <div class="avatar-title">头像上传</div>
                            <el-upload
                                class="avatar-uploader"
                                action=""
                                :show-file-list="false"
                                :auto-upload="false"
                                :before-upload="beforeAvatarUpload"
                                :on-change="handleFileChange"
                                :http-request="uploadImage">
                                <div v-if="currentAddForm.avatarUrl" class="avatar-preview">
                                    <!-- <el-avatar :size="100" :src="currentAddForm.avatarUrl" /> -->
                                    <imageView @onImgUrlChange="onImgUrlAddChange" class="image-view" :imgUrl="currentAddForm.avatarUrl"></imageView>
                                    <div class="mask">
                                        <el-icon><Edit /></el-icon>
                                    </div>
                                </div>
                                <el-icon v-else class="plus-icon"><Plus /></el-icon>
                            </el-upload>
                        </div>
                        <el-form-item label="名称" prop="userName">
                            <el-input v-model="currentAddForm.userName" />
                        </el-form-item>
                        <el-form-item label="id" prop="idStr">
                            <el-input v-model="currentAddForm.idStr" />
                        </el-form-item>
                        <el-form-item label="关注账号" prop="admin">
                            <el-input v-model="currentAddForm.admin" />
                        </el-form-item>
                        <el-form-item label="粉丝数量" prop="fsNumber">
                            <el-input v-model="currentAddForm.fsNumber" />
                        </el-form-item>
                    </template>
                    <template v-if="currentAddForm.msgType == 'sendText'">
                        <el-form-item label="选择左右">
                            <el-radio-group v-model="currentAddForm.leftAndRight">
                                <el-radio value="left">左侧</el-radio>
                                <el-radio value="right">右侧</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="文本内容" prop="textValue">
                            <el-input v-model="currentAddForm.textValue" type="textarea" />
                        </el-form-item>
                    </template>
                    <template v-if="currentAddForm.msgType == 'imageType'">
                        <el-form-item label="选择左右">
                            <el-radio-group v-model="currentAddForm.leftAndRight">
                                <el-radio value="left">左侧</el-radio>
                                <el-radio value="right">右侧</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="选择图片">
                            <el-radio-group v-model="currentAddForm.image">
                                <el-radio :value="item.value" v-for="item in biaoqingArray" :key="item.value">
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </template>
                </el-form>
            </div>

            <div class="add-bt-div">
                <el-button class="add-bt" type="primary" size="small" @click="addOnlick">提交</el-button>
            </div>
        </div>

        <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" title="添加修改类型信息" style="width: 50%; font-size: 12px" @close="closeResetForm">
            <el-form :model="currentForm" :rules="rules" label-width="150" ref="ruleFormRef" size="small">
                <el-form-item label="选择信息类型" prop="msgType">
                    <el-radio-group v-model="currentForm.msgType">
                        <el-radio :value="item.value" v-for="item in msgTypeArray" :key="item.value">
                            {{ item.name }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="currentForm.msgType == 'timeText'" label="时间" prop="centerTime">
                    <el-input v-model="currentForm.centerTime" />
                </el-form-item>
                <template v-if="currentForm.msgType == 'rightTips'">
                    <el-form-item label="选择字体颜色">
                        <el-radio-group v-model="currentForm.rightTextColor">
                            <el-radio value="heise">黑色</el-radio>
                            <el-radio value="hongse">红色</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="提示文本" prop="rightText">
                        <el-input v-model="currentForm.rightText" />
                    </el-form-item>
                </template>

                <template v-if="currentForm.msgType == 'adminInfo'">
                    <div class="avatar-div">
                        <div class="avatar-title">头像上传</div>
                        <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            :auto-upload="false"
                            :before-upload="beforeAvatarUpload"
                            :on-change="handleFileChange"
                            :http-request="uploadImage">
                            <div v-if="currentForm.avatarUrl" class="avatar-preview">
                                <!-- <el-avatar :size="100" :src="currentForm.avatarUrl" /> -->
                                <imageView @onImgUrlChange="onImgUrlChange" class="image-view" :imgUrl="currentForm.avatarUrl"></imageView>
                                <div class="mask">
                                    <el-icon><Edit /></el-icon>
                                </div>
                            </div>
                            <el-icon v-else class="plus-icon"><Plus /></el-icon>
                        </el-upload>
                    </div>
                    <el-form-item label="名称" prop="userName">
                        <el-input v-model="currentForm.userName" />
                    </el-form-item>
                    <el-form-item label="id" prop="idStr">
                        <el-input v-model="currentForm.idStr" />
                    </el-form-item>
                    <el-form-item label="关注账号" prop="admin">
                        <el-input v-model="currentForm.admin" />
                    </el-form-item>
                    <el-form-item label="粉丝数量" prop="fsNumber">
                        <el-input v-model="currentForm.fsNumber" />
                    </el-form-item>
                </template>
                <template v-if="currentForm.msgType == 'sendText'">
                    <el-form-item label="选择左右">
                        <el-radio-group v-model="currentForm.leftAndRight">
                            <el-radio value="left">左侧</el-radio>
                            <el-radio value="right">右侧</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文本内容" prop="textValue">
                        <el-input v-model="currentForm.textValue" type="textarea" />
                    </el-form-item>
                </template>
                <template v-if="currentForm.msgType == 'imageType'">
                    <el-form-item label="选择左右">
                        <el-radio-group v-model="currentForm.leftAndRight">
                            <el-radio value="left">左侧</el-radio>
                            <el-radio value="right">右侧</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择图片">
                        <el-radio-group v-model="currentForm.image">
                            <el-radio :value="item.value" v-for="item in biaoqingArray" :key="item.value">
                                {{ item.name }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeResetForm" size="small">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" size="small">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {reactive} from "vue";
import {CirclePlus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {Plus, Edit, Delete} from "@element-plus/icons-vue";
import {Download} from "@element-plus/icons-vue";
import {msgTypeArray, getValueName, biaoqingArray, getBqValueName} from "@/utils/json.js";
import draggable from "vuedraggable";
import imageView from "./image-view.vue";

const idKesy = ref(1);

const listData = ref([]);

const ruleAddFormRef = ref();
const currentAddForm = reactive({
    msgType: "timeText",
    leftAndRight: "left",
    image: "image1",
});
const addOnlick = async () => {
    dialogType.value = "添加";
    // dialogFormVisible.value = true;
    if (currentAddForm.msgType == "adminInfo" && !currentAddForm.avatarUrl) {
        return ElMessage("请选择头像");
    }
    if (!ruleAddFormRef.value) return;
    await ruleAddFormRef.value.validate((valid, fields) => {
        if (valid) {
            debugger;
            if (dialogType.value == "修改") {
                // ElMessage("submit");
                // listData.push({...currentForm});

                listData.value.splice(updatePosition.value, 1, {...currentForm});
            } else {
                // ElMessage("submit");
                idKesy.value = idKesy.value + 1;
                currentAddForm.idKesy = idKesy.value + "";
                listData.value.push({...currentAddForm});
            }
            emits("onUpdateChange", listData.value);
            // dialogType.value = "添加";
            // currentForm.msgType = "timeText";
            // currentForm.rightTextColor = "heise";
            // dialogFormVisible.value = false;
        } else {
            // ElMessage("error submit!");
            console.log("error submit!", fields);
        }
    });
};

// 拖拽结束回调
const onDragEnd = (event) => {
    emits("onUpdateChange", listData.value);
};

const emits = defineEmits(["onUpdateChange", "captureAndDownload"]);
const deleteOnclick = (positionData) => {
    listData.value.forEach((item, index) => {
        if (positionData.idKesy == item.idKesy) {
            listData.value.splice(index, 1);
        }
    });
    emits("onUpdateChange", listData.value);
};

/**
 * 导出
 */
const captureAndDownload = () => {
    emits("captureAndDownload");
};

/**
 *  表单相关
 */
const dialogType = ref("添加");
const dialogFormVisible = ref(false);
const ruleFormRef = ref();
//关闭表单，执行关闭之后的清空数据操作
const closeResetForm = () => {
    dialogFormVisible.value = false;
    /**
     * 执行清空操作
     */
};

/**
 * 更新
 */
const updatePosition = ref(0);

const updateForm = (item) => {
    dialogType.value = "修改";
    let indexPositon = 0;
    listData.value.forEach((obj, index) => {
        if (item.idKesy == obj.idKesy) {
            indexPositon = index;
        }
    });
    updatePosition.value = indexPositon;
    Object.assign(currentForm, item);
    dialogFormVisible.value = true;
};
const submitForm = async (formEl) => {
    if (currentForm.msgType == "adminInfo" && !currentForm.avatarUrl) {
        return ElMessage("请选择头像");
    }
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (dialogType.value == "修改") {
                // ElMessage("submit");
                // listData.push({...currentForm});

                listData.value.splice(updatePosition.value, 1, {...currentForm});
            } else {
                // ElMessage("submit");
                idKesy.value = idKesy.value + 1;
                currentForm.idKesy = idKesy.value + "";
                listData.value.push({...currentForm});
            }
            emits("onUpdateChange", listData.value);
            dialogFormVisible.value = false;
        } else {
            // ElMessage("error submit!");
            console.log("error submit!", fields);
        }
    });
};

const currentForm = reactive({
    msgType: "timeText",
    leftAndRight: "left",
    image: "image1",
});
const rules = reactive({
    centerTime: [{required: true, message: "请输入时间", trigger: "change"}],
    rightText: [{required: true, message: "请输入提示文本", trigger: "change"}],
    userName: [{required: true, message: "请输入名称", trigger: "change"}],
    idStr: [{required: true, message: "请输入id", trigger: "change"}],
    admin: [{required: true, message: "请输入账号", trigger: "change"}],
    fsNumber: [{required: true, message: "请输入粉丝数量", trigger: "change"}],
    textValue: [{required: true, message: "请输入文本内容", trigger: "change"}],
});

/**
 *  图片相关
 */

/**
 *  图片相关
 */
const onImgUrlChange = (previewUrl) => {
    currentForm.avatarUrl2 = previewUrl;
};
const onImgUrlAddChange = (previewUrl) => {
    // fromData.value.avatarUrl = previewUrl;
    currentAddForm.avatarUrl2 = previewUrl;
};

const beforeAvatarUpload = (file) => {
    const isImage = file.type.startsWith("image/");
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isImage) {
        ElMessage.error("只能上传图片文件");
        return false;
    }
    if (!isLt2M) {
        ElMessage.error("图片大小不能超过 2MB");
        return false;
    }
    return true;
};

const handleFileChange = (file) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        if (dialogType.value == "修改") {
            currentForm.avatarUrl = e.target.result;
        } else {
            currentAddForm.avatarUrl = e.target.result;
        }
    };
    reader.readAsDataURL(file.raw);
};

const uploadImage = ({file, onSuccess}) => {
    // 自定义上传逻辑，例如发送到服务器
    // 此处仅模拟上传成功
    setTimeout(() => {
        ElMessage.success("图片上传成功");
        onSuccess();
    }, 1000);
};
</script>

<style lang="scss" scoped>
.list-view-all {
    // height: 565px;
    height: 200px;
    overflow-y: auto;
    border: solid 1px #efefef;
}
.addtitle {
    margin-top: 15px;
}
.add-bt {
    margin-left: 20px;
}
.add-div {
    margin-top: 10px;
    height: 360px;
    .add-bt-div {
        display: flex;
        align-items: center;
        justify-content: center;
        .add-bt {
            margin-left: 0;
            width: 100px;
        }
    }
}
.list-div {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    padding: 10px 10px;
    .itemType {
        display: flex;
        margin-bottom: 10px;
        color: #599ef8;
        border-radius: 4px;
        border: solid 1px #e8e8e8;
        padding: 4px;
        font-weight: 500;
        cursor: pointer;
        width: 100%;
        justify-content: space-between;
        align-items: center;

        .left-div {
            display: flex;
            align-items: center;
            // width: 350px;

            .adminInfo {
                display: flex;
                align-items: center;
                margin-left: 10px;
                .el-avatar {
                    width: 60px;
                    height: 60px;
                }
                .image-view {
                    width: 60px;
                    height: 60px;
                }
                .right-info {
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                }
            }
        }
    }
}
</style>

<style scoped>
.avatar-div {
    display: flex;
    align-items: center;
    padding-left: 25px;
    margin-bottom: 20px;
}
.avatar-title {
    color: #616266;
    font-size: 12px;
    /* font-weight: 500; */
    margin-left: 20px;

    margin-right: 20px;
}
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.avatar-uploader:hover {
    border-color: #409eff;
}
.avatar-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.avatar {
    max-width: 100%;
    max-height: 100%;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.plus-icon {
    font-size: 24px;
    color: #8c939d;
}
.el-avatar {
    /* margin-left: 20px; */
}
</style>
